<template>
  <div class="container">
    <div class="logo">
        <div style="color:white;font-size:28px;margin:20px 0px" v-if="!isCollapse">🐌蜗牛学苑</div>
        <div style="color:white;margin-top:20px" v-else>🐌</div>
    </div>
    <el-menu
      :router="true"
      background-color="#000"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <aside-menu-item v-for="item in menus" :key="item._id" :menuItem="item"></aside-menu-item>
    </el-menu>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapMenusState,mapActions:mapMenusActions}=createNamespacedHelpers('menus')
export default {
    computed:{
        ...mapMenusState(['isCollapse','menus'])
    },
    methods:{
      ...mapMenusActions(['getMenusAsync'])
    },
    created(){
      this.getMenusAsync()
    }
}
</script>

<style lang="scss" scoped>
 .el-menu{
    border-right: none;
 }
 .container{
  .logo{
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: '华文琥珀';
  }
 }
</style>